"use client"

import { useEffect, useRef } from "react"
import { Fireworks as ReactFireworks } from "@fireworks-js/react"

export default function Fireworks() {
  const ref = useRef<ReactFireworks>(null)

  useEffect(() => {
    if (ref.current) {
      ref.current.start()
    }
    return () => {
      if (ref.current) {
        ref.current.stop()
      }
    }
  }, [])

  return (
    <ReactFireworks
      ref={ref}
      options={{
        opacity: 0.5,
        explosion: 5,
        intensity: 30,
        traceLength: 3,
        traceSpeed: 10,
        rocketsPoint: {
          min: 50,
          max: 50,
        },
      }}
      style={{
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        position: "fixed",
        zIndex: 999,
        pointerEvents: "none",
      }}
    />
  )
}

